<template>
  <div>
    <view>
      <swiper :images="images" />
    </view>
    <div class="about">
      <div class="title">
        关于我们<br/>
<!--        <div class="en">-->
<!--          About Us-->
<!--        </div>-->
        <div class="line"></div>
      </div>
      <div class="container2">
        <div class="cont">
          {{aboutcontent}}
        </div>
        <div class="more2" @click="aboutjump">
          了解更多
        </div>
      </div>
    </div>
    <div class="proseries">
      <div v-for="(item,key) in list2" :key="key" class="item">
        <img :src="item.img" alt="" class="seriesimg" mode="widthFix" @click="goContent2(item.id)"/>
        <div class="name">{{item.name}}</div>
      </div>
    </div>
    <div class="line2"></div>
    <div class="product" >
       <div class="title">热销产品</div>
         <div v-for="(item,key) in list" :key="key" class="item">
           <img :src="item.img2" alt="" class="proimg" mode="widthFix" @click="goContent(item.id)"/>
           <div class="cont">
             <div class="name"># {{item.name}} #</div>
           </div>
         </div>
    </div>
    <div class="line2"></div>
    <div class="news" >
      <div class="title">新闻资讯</div>
      <div class="content" style="width: 90%;margin:10px auto 0;">
        <div v-for="(item,key) in list3" :key="key3" class="list clearfix" @click="goContent3(item.id)">
          <img :src="item.img" alt="" class="img" mode="widthFix">
          <div class="text clearfix">
            <div class="name">
              {{item.name}}
            </div>
            <div class="date clearfix">
              <div class="time fl">
                <i class="iconfont icon-shijian"></i> {{item.time}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="line2"></div>
    <view>
<!--      <loading :hidden="hidden">-->
<!--        加载中...-->
<!--      </loading>-->
    </view>
  </div>
</template>
<script>
  import swiper from "@/components/swiper";
  export default {
    components: { swiper },
    data() {
      return {
        images: [
          {
            url:
              "https://eztw.com.cn/static/uploads/banner/3f022b688655910b42dd0b0c0079a70b.jpg",
          }
        ],
        aboutcontent: '  浙江智通线缆有限公司是一家集研发、生产、销售为一体的专业生产电线的企业。公司座落在我国最大的低压电器之都---乐清经济开发区，东临“世界地质公园”之称的国家5A旅游风景区---雁荡山,距高速公路500米，与温州机场17公里，动车站5公里之隔..',
        list:[],
        list2:[],
        list3:[],
        seriesimg:[
            "../../static/images/series.png"
        ],
        // hidden:false
      };
    },
    methods: {
      requestData() {
        const that = this;
        this.$http.get({
          url:"hotpro",
          data:{
          },
            header: {
              'content-type': 'application/json' // 默认值
            },
        }).then(res =>{
          console.log('热销产品')
          console.log(res)
          that.list = res.data;
          // that.hidden=true;
          wx.hideToast();
        });
        // const that = this;
        // console.log(that)
        // const api = 'https://eztw.com.cn/hotpro';
        // wx.request({
        //   url: api, //仅为示例，并非真实的接口地址
        //   data: {
        //   },
        //   header: {
        //     'content-type': 'application/json' // 默认值
        //   },
        //   success: function (res) {
        //     console.log(res.data)
        //     that.list = res.data;
        //     // that.hidden=true;
        //     wx.hideToast();
        //   }
        // })
      },
      requestData2() {
        const that = this;
        // console.log(that)
        var config= (wx.setStorageSync("config"));
        const api = 'https://eztw.com.cn/appseries';
        wx.request({
          url:api, //仅为示例，并非真实的接口地址
          data: {
          },
          header: {
            'content-type': 'application/json' // 默认值
          },
          success: function (res) {
            console.log(res.data)
            that.list2 = res.data;
          }
        })
      },
      requestData3() {
        const that = this;
        // console.log(that)
        const api = 'https://eztw.com.cn/xcxindexnews2';
        wx.request({
          url: api, //仅为示例，并非真实的接口地址
          data: {
          },
          header: {
            'content-type': 'application/json' // 默认值
          },
          success: function (res) {
            console.log(res.data)
            that.list3 = res.data;
          }
        })
      },
      aboutjump(){
        wx.navigateTo({
          url: '/pages/about2/main'
        })
      },
      goContent2(id) {
        // console.log(id)
        const url = '../prolist/main?id=' + id;
        wx.navigateTo({url});
      },
      goContent(id) {
        // console.log(aid)
        const url = '../proscontent/main?id=' + id;
        wx.navigateTo({url});
      },
      goContent3(id) {
        // console.log(aid)
        const url = '../newscontent/main?id=' + id;
        wx.navigateTo({url});
      },
    },
    onLoad(){
      console.log('onLoad')
      this.requestData();
      this.requestData2();
      this.requestData3();
      wx.showToast({title: '加载中', icon: 'loading', duration: 10000});
    },
    computed: {}
  };
</script>

<style scoped lang=scss>
  .text-center{
    text-align: center;
  }
  .line2{
    height: 10px;
    width: 100%;
    background: #f1efef;
    border-top: 1px solid #ddd;
  }
  .message {
    color: red;
    padding: 10px;
    text-align: center;
  }

  .about {
    background: #085293;
    width: 100%;
    padding:20px 0;
    .title {
      color: #fff;
      font-size: 18px;
      text-align: center;
      .en {
        font-size: 14px;
        font-family: Arial;
        text-transform: uppercase;
        position: relative;
        padding-bottom: 10px;
        &:after{
          content: '';
          position: absolute;
          bottom: 0;
          left:50%;
          margin-left: -17.5px;
          width: 35px;
          height: 2px;
          background: #fff;
          border-radius: 5px;

        }
      }
      .line {

      }

    }
    .cont{
      font-size: 14px;
      line-height: 25px;
      color: #ffffff;
      text-indent: 20px;
      text-align: center;
    }
    .more2{
      font-size: 14px;
      background: #fff;
      text-align: center;
      width:100px;
      height: 35px;
      line-height: 35px;
      color: #0078b9;
      margin: 20px auto 0;
      border-radius: 20px;

    }
  }
  .content {
    color: #fff;
    font-size: 14px;
    margin-top: 10px;
  }
  .more{
    font-size: 13px;
    text-align: center;
    width:80px;
    height: 30px;
    line-height: 30px;
    color: #d81e06!important;
    margin-top: 10px;
    border-radius: 10px;
  }
  .product {
    display: -webkit-flex;
    display: flex;
    flex-wrap:wrap;
    padding:0px 0 15px;
    width:100%;
    .title{
      width: 100%;
      height: 50px;
      line-height: 50px;
      background: #fff;
      border-left: 4px solid #0078b9;
      padding-left: 15px;
      font-size: 18px;
      /*font-weight: bold;*/
    }
    .item{
      padding:20px 0;
      width: 48%;
      display: -webkit-flex;
      margin: 1% 1%;
      display: flex;
      align-items:center;
      flex-direction:column;
      background: url("https://eztw.com.cn/static/index/picture/indexprobg.jpg") center no-repeat;
      img{
        width: 70%;
      }
      .cont{
        width: 90%;
        padding:20px 5%;
        .name{
          font-size: 12px;
          text-align: center;
          color: #fff;
          display: -webkit-box;
          overflow: hidden;
          text-overflow: ellipsis;
          word-wrap: break-word;
          white-space: normal !important;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;

        }
        .more{
          font-size: 14px;
          color: #fff;
          background: #000;
          text-align: center;
          width: 70px;
          height: 30px;
          line-height: 30px;
          margin-top: 10px;
          border: 1px solid #000;
        }
      }

    }
  }
  .proseries {
    display: -webkit-flex;
    display: flex;
    flex-wrap:wrap;
    /*padding:10px 0 10px;*/
    width:95%;
    margin:0 auto;
    background: #fff;
    .item{
      width: 25%;
      display: -webkit-flex;
      margin: 20px 0;
      display: flex;
      align-items:center;
      flex-direction:column;
      img{
        width: 60%;
        border-radius:5px ;
      }
      .name{
        font-size: 12px;
        text-align: center;
        margin-top: 4px;
      }
    }
  }
  .news{
    display: -webkit-flex;
    display: flex;
    flex-wrap:wrap;
    padding:0px 0 15px;
    width:100%;
    .list{
      margin-bottom:20px;
      .img{
        width: 40%;
        border-radius: 10px;
        float:left;
      }
      .text{
        float: right;
        width: 55%;
        margin-left:5%;
        padding-top:15px;
        .title{
          font-size: 14px;
        }
        .date{
          font-size:12px;
          margin-top:0px;
          .iconfont{
            display: inline-block;
            font-size: 12px;
          }
          .liulan{
            margin-right: 20px;
            .iconfont{
              font-size: 14px;
            }
          }
        }
      }
    }
    .title{
      width: 100%;
      height: 50px;
      line-height: 50px;
      background: #fff;
      border-left: 4px solid #0078b9;
      padding-left: 15px;
      font-size: 18px;
      /*font-weight: bold;*/
    }
    .date{
      font-size:12px;
      margin-top:10px;
      .iconfont{
        display: inline-block;
        font-size: 12px;
      }
      .liulan{
        margin-right: 20px;
        .iconfont{
          font-size: 14px;
        }
      }
    }
    .content{
      .name{
        color: #333333;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        white-space: normal !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .date{
        color: #333333;
      }
    }
  }
</style>
